<template>
	<view class="report-container">
		<!-- 标题 -->
		<view class="title">请选择你举报的原因：</view>
		<!-- 举报原因选项区域 -->
		<view class="reason-grid">
			<view class="reason-item" v-for="(item, index) in reasonList" :key="index" @click="handleReasonClick(item)">
				<text class="reason-text">{{ item }}</text>
				<!-- 根据是否选中，动态切换图标（这里用文字模拟选中状态展示，也可用 uni-app 的图标组件） -->
				<text class="reason-checkbox" :style="{color: selectedReasons.includes(item) ? '#1989fa' : '#ccc'}">
					{{ selectedReasons.includes(item) ? '✔' : '○' }}
				</text>
			</view>
		</view>
		<!-- 详细描述 -->
		<view class="desc-area">
			<textarea class="desc-input" placeholder="详细描述..." v-model="description" maxlength="200"></textarea>
			<view class="word-count">{{ description.length }}/200</view>
		</view>
		<!-- 举报按钮 -->
		<button class="report-btn" @click="handleReport">举报</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		juBaoTieTie
	} from '@/api/xiaoquan.js';

	// 举报原因列表
	const reasonList = ref([
		'广告营销', '色情低俗',
		'暴力恐怖', '政治相关',
		'恶意刷屏', '传播谣言',
		'涉嫌欺诈', '辱骂攻击',
		'泄露他人隐私', '其他原因'
	]);
	// 选中的举报原因
	const selectedReasons = ref([]);
	// 详细描述内容
	const description = ref('');

	// 处理举报原因选项点击事件
	const handleReasonClick = (item) => {
		if (selectedReasons.value.includes(item)) {
			// 已选中，移除
			selectedReasons.value = selectedReasons.value.filter(reason => reason !== item);
		} else {
			// 未选中，添加
			selectedReasons.value.push(item);
		}
	};

	// 举报按钮点击事件
	const handleReport = async () => {
		// 校验是否选择了举报原因
		if (selectedReasons.value.length === 0) {
			uni.showToast({
				title: '请选择举报原因',
				icon: 'none'
			});
			return;
		}

		// 校验详细描述是否为空
		if (!description.value.trim()) {
			uni.showToast({
				title: '请填写详细描述',
				icon: 'none'
			});
			return;
		}

		const tieZiId = uni.getStorageSync("tieZiId");
		console.log('选中的举报原因：', selectedReasons.value);
		console.log('详细描述：', description.value);

		const data = {
			reportTypes: selectedReasons.value.join(','), // 转为逗号分隔的字符串
			reportReasons: description.value,
			postId: tieZiId
		};

		try {
			const res = await juBaoTieTie(data);

			if (res && res.code === 200) {
				if (res.data === 1) {
					await new Promise(resolve => {
						uni.showToast({
							title: '举报提交成功',
							icon: 'success',
							success: () => setTimeout(resolve, 1500) // 等待提示显示完成
						});
					});
				} else {
					await new Promise(resolve => {
						uni.showToast({
							title: '您已举报过',
							icon: 'success',
							success: () => setTimeout(resolve, 1500) // 等待提示显示完成
						});
					});
				}
			} else {
				await new Promise(resolve => {
					uni.showToast({
						title: '举报提交失败',
						icon: 'none',
						success: () => setTimeout(resolve, 1500) // 等待提示显示完成
					});
				});
			}

			// 所有提示显示完成后再跳转
			uni.switchTab({
				url: '/pages/circle/circle'
			});
		} catch (error) {
			console.error('举报请求失败', error);
			await new Promise(resolve => {
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none',
					success: () => setTimeout(resolve, 1500)
				});
			});
		}
	};
</script>

<style scoped>
	/* 样式保持不变 */
	.report-container {
		padding: 20rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.reason-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.reason-item {
		width: 46%;
		margin: 2%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 16rpx;
		box-sizing: border-box;
		cursor: pointer;
	}

	.reason-text {
		font-size: 28rpx;
		color: #333;
	}

	.reason-checkbox {
		font-size: 32rpx;
	}

	.desc-area {
		margin-top: 20rpx;
	}

	.desc-input {
		width: 100%;
		min-height: 120rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 16rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
	}

	.word-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.report-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1989fa;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		margin-top: 30rpx;
	}
</style>